<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="element.css">
</head>

<body>
<h1 v-if="awesome">Vue is awesome!</h1>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
<div id="example">
    {{ message.split('').reverse().join('') }}
</div>

<ul id="example-1">
    <li v-for="item in item">
        {{ item.message }}
    </li>
</ul>


<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else>
    Now you don't
</div>
<ul id="v-for-object" class="demo">
    <li v-for="(value,key,index) in object">
        {{ key }}: {{ value }}:{{index}}
    </li>
</ul>
<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>


<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>
<div id="demo">{{ fullName }}</div>

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
</body>
<!-- import Vue before Element -->
<script src="./vue.js"></script>
<script src="./jquery.min.js"></script>
<script src="./element.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    })
    new Vue({
        el: '#demo',
        data: {
            show: true,
        }
    })
    var example1 = new Vue({
        el: '#example-1',
        data: {

            item: [
                { message: 'age' },
                { message: 'Bar' }
            ]
        }
    })
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
    new Vue({
        el: '#example-3',
        methods: {
            say: function (message) {
                alert(message)
            }
        }
    })
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30,
                sex:'女'
            }
        }
    })


    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</html>